<template>
  <div style="width: 1000px;height: 120px;margin: 20px auto 0;">
    <router-link to="/hot">
      <img style="padding-left: 22px" src="../../assets/header.png">
    </router-link>
  </div>
  <div style="width: 1000px;margin: 0 auto;">
    <el-row  :gutter="20">
      <el-col :span="5">
          <el-card shadow="never">
            <el-menu default-active="/hot/articles/homepage"
                     router unique-opened style="border-right: none">
              <el-sub-menu index="/hot/articles">
                <template #title>
                  <el-icon><Tickets /></el-icon>
                  <span>篝火文章榜</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/hot/articles/homepage">综合</el-menu-item>
                  <el-menu-item index="/hot/articles/backend">后端</el-menu-item>
                  <el-menu-item index="/hot/articles/frontend">前端</el-menu-item>
                  <el-menu-item index="/hot/articles/android">Android</el-menu-item>
                  <el-menu-item index="/hot/articles/ios">IOS</el-menu-item>
                  <el-menu-item index="/hot/articles/ai">人工智能</el-menu-item>
                  <el-menu-item index="/hot/articles/freebie">开发工具</el-menu-item>
                  <el-menu-item index="/hot/articles/career">代码人生</el-menu-item>
                  <el-menu-item index="/hot/articles/article">阅读</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-menu-item index="/hot/columns">
                <el-icon><CollectionTag /></el-icon>
                <span>精选专栏榜</span>
              </el-menu-item>
              <el-menu-item index="/hot/collections">
                <el-icon><Reading /></el-icon>
                <span>推荐收藏集</span>
              </el-menu-item>
              <el-sub-menu index="/hot/authors">
                <template #title>
                  <el-icon><User /></el-icon>
                  <span>优秀作者榜</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/hot/authors/backend">后端</el-menu-item>
                  <el-menu-item index="/hot/authors/frontend">前端</el-menu-item>
                  <el-menu-item index="/hot/authors/client">客户端</el-menu-item>
                  <el-menu-item index="/hot/authors/ai">人工智能</el-menu-item>
                  <el-menu-item index="/hot/authors/freebie">开发工具</el-menu-item>
                  <el-menu-item index="/hot/authors/career">代码人生</el-menu-item>
                  <el-menu-item index="/hot/authors/article">阅读</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="/hot/collected-articles">
                <template #title>
                  <el-icon><Star /></el-icon>
                  <span>文章收藏榜</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/hot/collected-articles/homepage">综合</el-menu-item>
                  <el-menu-item index="/hot/collected-articles/backend">后端</el-menu-item>
                  <el-menu-item index="/hot/collected-articles/frontend">前端</el-menu-item>
                  <el-menu-item index="/hot/collected-articles/android">Android</el-menu-item>
                  <el-menu-item index="/hot/collected-articles/ios">IOS</el-menu-item>
                  <el-menu-item index="/hot/collected-articles/ai">人工智能</el-menu-item>
                  <el-menu-item index="/hot/collected-articles/freebie">开发工具</el-menu-item>
                  <el-menu-item index="/hot/collected-articles/career">代码人生</el-menu-item>
                  <el-menu-item index="/hot/collected-articles/article">阅读</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-card>
      </el-col>
      <el-col :span="19"><el-card shadow="never"><router-view/></el-card></el-col>
    </el-row>
  </div>


</template>

<script setup>


</script>

<style>


</style>